<template>
    <div class="madp-poster-list">
        <div class="madp-row">
            <h3>海报素材（共{{ posterData.length }}篇）</h3>
        </div>
        <div class="madp-article-content">
            <div class="madp-add-content" @click="addPoster" v-if="permissions.cp_marketing_material_add">
                <i class="el-icon-circle-plus-outline"></i>
                <p>上传海报</p>
            </div>
            <div class="madp-add-content madp-add-list" v-for="(item, index) in posterData" :key="index">
                <div class="madp-add-release" v-show="item.marketingState == 1">
                    内容未发布 &nbsp;
                    <el-tooltip content="文章内容未进行发布审核，不支持发送给客户哦" placement="top" effect="light">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </div>
                <div class="madp-add-release" v-show="item.marketingState == 3">
                    有修改内容未发布 &nbsp;
                    <el-tooltip content="文章内容未进行发布审核，不支持发送给客户哦" placement="top" effect="light">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </div>
                <el-image class="madp-poster-image" fit="contain" :src="item.marketingUrl"></el-image>
                <div class="madp-list-bottom">
                    <span>上传于{{ item.updateTime }}</span>
                    <i class="el-icon-edit" v-if="permissions.cp_marketing_material_edit" @click="editRow(item)"></i>
                    <i class="el-icon-delete" v-if="permissions.cp_marketing_material_del" @click="deleteRow(item)"></i>
                </div>
            </div>
        </div>
        <el-dialog title="添加海报" :close-on-click-modal="false" v-if="dialogVisible" :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
            <el-upload
                v-loading="loading"
                accept=".jpg, .png, .jpeg"
                action="#"
                :headers="headers"
                class="madp-upload-demo"
                :auto-upload="false"
                multiple
                :show-file-list="false"
                :limit="1"
                :on-change="uploadChangeFile"
                :file-list="fileList"
            >
                <i v-if="!ruleForm.marketingUrl" class="el-icon-plus avatar-uploader-icon"></i>
                <img class="madp-article-cover" v-else fit="contain" :src="ruleForm.marketingUrl" />
            </el-upload>
            <p class="el-upload__text">只能上传jpg/jpeg/png文件，且不超过5M</p>
            <div>
                <h4>海报追踪设置</h4>
                <el-checkbox class="madp-poster-track-behavior" v-model="ruleForm.trackBehavior">行为通知(当客户点击海报时，发送海报的员工会收到消息提醒)</el-checkbox>
                <!-- <p class="madp-checked-dynamic">动态通知(当客户点击海报时，会将客户的打开行为记录在客户动态里)</p> -->
            </div>
            <div class="madp-element-button">
                <el-button type="primary" size="medium" @click="dialogVisibleCancelFn">取消</el-button>
                <el-button type="primary" size="medium" @click="savePosterForm('ruleForm', 1)">保存</el-button>
                <el-button type="primary" size="medium" @click="savePosterForm('ruleForm', 2)">保存即发布</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { newAndEditPoster, deletePoster, getPosterList, sysFileUpload, posterRelease } from '@/api/customer-into/marketing-material';
import store from '@/store';
import { checkFileType } from '@/util/util';
import { mapGetters } from 'vuex';
export default {
    props: {
        activeObj: {
            type: Object,
            default: () => {
                return {
                    activeIndex: 0
                };
            }
        }
    },
    data() {
        return {
            // loading开关
            loading: false,
            // 输入内容
            inputValue: null,
            // 请求头
            headers: {
                Authorization: 'Bearer ' + store.getters.access_token,
                LdapToken: store.getters.ldap_token
            },
            // 海报内容
            posterData: [],
            // 弹窗开关
            dialogVisible: false,
            // 表单对象
            ruleForm: {
                title: '',
                marketingSize: '',
                marketingUrl: '',
                trackBehavior: false,
                trackDynamic: false,
                changeTitle: 0 //0新增 1是编辑
            },
            // 文件列表
            fileList: []
        };
    },
    watch: {
        activeObj() {
            if (this.activeObj.activeIndex > 1) {
                this.getPosterListFn();
            }
        }
    },
    computed: {
        ...mapGetters(['permissions'])
    },
    created() {
        this.getPosterListFn();
    },
    methods: {
        //上传海报
        addPoster() {
            this.ruleForm = {
                title: '',
                marketingSize: '',
                marketingUrl: '',
                trackBehavior: false,
                trackDynamic: false,
                changeTitle: 0 //0新增 1是编辑
            };
            this.changeTitle = 1;
            this.dialogVisible = true;
        },
        //取消
        dialogVisibleCancelFn() {
            this.dialogVisible = false;
        },
        // 确认
        savePosterForm(ruleForm, marketingState) {
            if (!this.ruleForm.marketingUrl) {
                this.$message.error('请上传海报文件');
                return;
            }
            this.newAndEditPosterFn(this.ruleForm, marketingState);
        },
        //图片上传
        uploadChangeFile(file) {
            if (file && file.raw) {
                let fileMsg = file.raw;
                if (fileMsg.size / 1024 / 1024 > 5) {
                    this.fileList = [];
                    this.$message.error('上传不能超过5M');
                    return;
                }
                const isOk = checkFileType('img', file);
                if (!isOk) {
                    this.fileList = [];
                    this.$message.error('上传图片格式不正确');
                    return;
                }
                this.sysFileUploadFn(file);
            }
        },
        // 文件上传
        sysFileUploadFn(file) {
            this.fileList = [];
            let fd = new FormData();
            fd.append('file', file.raw);
            this.loading = true;
            sysFileUpload(fd)
                .then((res) => {
                    this.loading = false;
                    if (res.data.code === 0) {
                        let fileMsg = res.data.data;
                        this.ruleForm.title = fileMsg.original;
                        this.ruleForm.marketingUrl = fileMsg.url;
                        if (fileMsg.fileSize / 1024 / 1024 >= 1) {
                            this.ruleForm.marketingSize = (fileMsg.fileSize / 1024 / 1024).toFixed(2) + 'M';
                        } else {
                            this.ruleForm.marketingSize = (fileMsg.fileSize / 1024).toFixed(2) + 'KB';
                        }
                    }
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        //删除海报
        deleteRow(row) {
            this.deletePosterFn(row.id);
        },
        // 编辑海报
        editRow(row) {
            this.ruleForm = {
                title: row.title,
                marketingSize: row.marketingSize,
                marketingUrl: row.marketingUrl,
                trackBehavior: row.trackBehavior === 1 ? true : false,
                trackDynamic: row.trackDynamic === 1 ? true : false,
                changeTitle: 1, //0新增 1是编辑
                id: row.id
            };
            this.dialogVisible = true;
        },
        //关闭弹框按钮
        handleClose() {
            this.ruleForm = {
                title: '',
                marketingSize: '',
                marketingUrl: '',
                trackBehavior: false,
                trackDynamic: false,
                changeTitle: 0 //0新增 1是编辑
            };
            this.dialogVisible = false;
        },
        //新增海报 post 编辑链接 put
        newAndEditPosterFn(ruleForm, marketingState) {
            let obj = {
                title: this.ruleForm.title,
                marketingSize: this.ruleForm.marketingSize,
                classification: this.activeObj.id, //分类id
                marketingUrl: this.ruleForm.marketingUrl,
                trackBehavior: this.ruleForm.trackBehavior ? 1 : 0, //文章追踪-行为通知，0为未选中，1为选中，默认未选中
                trackDynamic: 1 //文章追踪-动态通知，0为未选中，1为选中，默认未选中
            };
            if (this.ruleForm.changeTitle == 1) {
                obj.id = this.ruleForm.id;
            }
            newAndEditPoster(obj, this.ruleForm.changeTitle == 0 ? 'post' : 'put').then((res) => {
                if (res.data.code === 0) {
                    if (marketingState !== 2) {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                    }
                    if (marketingState === 1) {
                        this.dialogVisible = false;
                        this.getPosterListFn();
                    } else {
                        if (obj.id) {
                            this.posterReleaseFn(obj.id);
                        } else {
                            this.posterReleaseFn(res.data.data.id);
                        }
                    }
                }
            });
        },
        //发布海报
        posterReleaseFn(id) {
            posterRelease(id).then((res) => {
                if (res.data.code === 0) {
                    this.$message({
                        message: '保存并发布成功',
                        type: 'success'
                    });
                    this.dialogVisible = false;
                    this.getPosterListFn();
                }
            });
        },
        //海报分页查询
        getPosterListFn() {
            let obj = {
                title: this.inputValue,
                classification: this.activeObj.id
            };
            getPosterList(obj).then((res) => {
                if (res.data.code === 0) {
                    this.posterData = res.data.data;
                }
            });
        },
        //删除海报
        deletePosterFn(id) {
            deletePoster(id).then((res) => {
                if (res.data.code === 0) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.getPosterListFn();
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.madp-public-title {
    width: 20%;
}
.madp-row {
    margin-top: 10px;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    .el-icon-search {
        position: relative;
        top: 2px;
        cursor: pointer;
        font-size: 20px;
    }
}
.madp-article-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 10px;
    .madp-add-content {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 252px;
        min-height: 350px;
        height: fit-content;
        border: 1px solid #dcdfe6;
        margin: 10px;
        padding-bottom: 35px;
        .el-icon-circle-plus-outline {
            font-size: 20px;
        }
    }
}
.madp-add-list {
    position: relative;
    .madp-add-release {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 10;
        font-size: 12px;
        cursor: pointer;
        width: fit-content;
        height: 20px;
        background: rgba(220, 223, 230, 0.8);
        text-align: right;
        border-radius: 2px;
    }
    .madp-add {
        position: absolute;
        top: 10px;
        left: 5px;
        width: 56%;
        height: 90px;
    }
    .madp-list-bottom {
        height: fit-content;
        width: 100%;
        font-size: 0.75rem;
        border-top: 0.0625rem solid #dcdfe6;
        display: flex;
        padding: 6px 6px 0 0;
        position: absolute;
        bottom: 0;
        left: 0;
        justify-content: space-between;
        span {
            margin-left: 5px;
        }
        .el-icon-edit {
            font-size: 20px;
            margin-left: 10px;
            cursor: pointer;
        }
        .el-icon-delete {
            font-size: 20px;
            margin-left: 10px;
            cursor: pointer;
        }
        .el-icon-refresh {
            font-size: 20px;
            margin-left: 10px;
            cursor: pointer;
        }
        &-btns {
            display: flex;
        }
    }
}
.madp-element-button {
    text-align: center;
    margin-top: 20px;
}
.madp-poster-image {
    width: 100%;
    max-height: 240px;
}
/deep/ .el-image__inner {
    max-height: 240px;
    max-width: 100%;
}
.madp-checked-dynamic {
    display: flex;
    white-space: pre-wrap;
    margin-top: 20px;
}
.madp-upload-demo {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 200px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin: 0 auto;
    .madp-article-cover {
        object-fit: contain;
        width: 240px;
        height: 190px;
    }
}
.el-upload__text {
    text-align: center;
    margin: 5px 0;
}
.madp-poster-track-behavior {
    margin-top: 20px;
}
.el-images {
    max-width: 100%;
    max-height: 180px;
}
</style>
